<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="昵称/名称">
                <a-input v-model="queryParam.name" placeholder="请输入用户昵称/名称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入用户手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button style="margin-right: 8px" @click="() => (this.queryParam = {})">重置</a-button>
                <a-button type="primary" @click="onPageSearch">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <span></span>
        <a-button type="primary" @click="handleEdit(record)">添加</a-button>
      </div>
      <UserManage :queryParam="queryParam" ref="userManage"></UserManage>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import UserManage from './components/AdminList'
export default {
  components: {
    UserManage,
  },
  props: {},
  data() {
    return {
      queryParam: {},
      currentTab: 'userManage',
    }
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.$refs[val].$refs.table.refresh(true)
      })
    },
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    onPageSearch() {
      this.$nextTick(() => {
        this.$refs[this.currentTab].$refs.table.refresh(true)
      })
    },
    onExport() {},
    handleEdit() {
      this.$refs['userManage'].showAdd()
    },
  },
}
</script>

<style scoped>
</style>